<template>
	<div class="pagination-box">
		<div class="pagination-ctx">
			<el-select v-model="mSize" @change="onPageSize" size="mini" class="pagination-page-size">
				<el-option v-for="(item, index) in sizeData" :key="index" :label="item" :value="item">
					<span>{{ item }}条/页</span>
				</el-option>
			</el-select>
			<el-button size="mini" @click="onPrev" :disabled="mPage <= 1">上一页</el-button>
			<el-button size="mini" @click="onNext" :disabled="mBanNext">下一页</el-button>
			<div class="jump-page">
        <span>to</span>
				<el-input size="mini" v-model="mPage" @change="changePage" class="pagination-page"></el-input>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		inject: ['pagination'], // 接收后面mixins中provider的提供的参数
		data() {
			return {
				mSize: this.pageSize, // 选中的条数
				sizeData: ['10', '20', '50', '100'],
				mPage: this.currentPage, // 页数
				mBanNext: this.banNext
			}
		},
		props: {
			currentPage: { // 当前页
				type: Number,
				default: 1
			},
			pageSize: { // 每页显示条数
				type: Number,
				default: 10 // 默认10条
			},
			banNext: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			pagination: { // 监听器
				deep: true,
				handler(v) {
					if (!v) {
						return
					}
					const {
						pageSize,
						currentPage,
						banNext
					} = v
					this.mSize = pageSize;
					this.mPage = currentPage;
					this.mBanNext = banNext;
				}
			}
		},
		methods: {
			emitPaginationChangeInfo() {
				let self = this;
				const pageInfo = {
					pageSize: self.mSize,
					currentPage: self.mPage,
					banNext: self.mBanNext
				}
				self.$emit('pageChanged', pageInfo)
			},
			onPageSize(val) {
				let self = this;
				self.mSize = val;
				self.emitPaginationChangeInfo()
			},
			onPrev() {
				let self = this;
				self.mPage--;
				self.mBanNext = false;
				self.emitPaginationChangeInfo()
			},
			onNext() {
				let self = this;
				self.mPage++;
				self.emitPaginationChangeInfo()
			},
			changePage(val) {
				let self = this;
				self.mPage = val;
				self.emitPaginationChangeInfo()
			}
		}
	}
</script>
<style scoped lang="scss">
</style>
